<template>
    <div class="GoodsList">
        <div class="goodsList">
            <div class="goodsListTop">
                <div class="tile">{{ title }}</div>
                <div class="right" @click="sortGoodsList()">
                    <p>换一批</p>
                    <img class="rotate" src="./image/rotate.png"  isRotateActive
                        :class='isRotateActive ? "rotate_active" : "rotate_stop"'>

                </div>
            </div>
            <div class="goodsListContent">

                <div class="item" v-for="(item, i) in goodsList" :key="i">
                    <router-link :to="`/detail/${item.goods_id}`" target="_blank">
                        <div class="p-img">
                            <!-- 路由跳转时要带商品id，跳转后的路由要用商品id展示具体哪个商品数据 -->
                            <img v-lazy="item.goods_img" />
                        </div>
                        <div class="name">
                            <h2> {{ item.goods_name }}</h2>
                        </div>
                        <div class="attr">
                            <h3>{{ item.goods_title }} </h3>
                        </div>
                        <div class="price">
                            <p> {{ item.goods_price }}元</p>
                        </div>
                    </router-link>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GoodsList',
    props:['title','categoryId','num'],
    data() {
        return {
            goodsList: [],
            isRotateActive: false
        };
    },

    mounted() {
        this.getGoodsList()
    },


    methods: {
        async getGoodsList() {
            const res = await this.$API.reqGetGoodsByCategory(this.categoryId);
            if (res.code == 200) {
                this.goodsList = res.data.sort(() => Math.random() - 0.5).slice(0, this.num)
            }
        },
        sortGoodsList() {
            this.isRotateActive = true
            this.getGoodsList()
            setTimeout(() => {
                this.isRotateActive = false
            }, 300);
        }
    }
};
</script>

<style lang="less" scoped>
.GoodsList {
    margin-top: 30px;

    .goodsList {
        width: 1200px;
        margin: 0 auto;

        .goodsListTop {
            height: 40px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tile {
                font-size: 20px;
                font-weight: 700;
            }

            .right {
                height: 100%;
                display: flex;
                align-items: center;
                cursor:pointer;

                .rotate {
                    height: 60%;
                    margin-left: 5px;
                    animation: rotate_ar 0.3s linear infinite;
                }

                .rotate_active {
                    animation-play-state: running;
                }

                .rotate_stop {
                    animation-play-state: paused
                }

                @keyframes rotate_ar {
                    0% {
                        transform: rotate(0deg);
                    }

                    100% {
                        transform: rotate(360deg);
                    }
                }
            }


        }

        .goodsListContent {
            display: flex;
            justify-content: space-between;

            .item {
                background-color: #fff;
                text-align: center;
                height: 100%;
                width: 280px;
                line-height: 28px;

                a {
                    text-decoration: none;
                }

                .p-img {
                    text-align: center;
                    width: 100%;
                    height: 200px;

                    img {
                        max-width: 70%;
                        margin: auto;
                        height: auto;
                        max-height: 100%;
                        vertical-align: middle;
                    }
                }

                .name {
                    h2 {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333;
                    }
                }

                .attr {
                    padding-left: 15%;
                    text-align: center;
                    width: 70%;
                    overflow: hidden;
                    margin-bottom: 8px;
                    min-height: 20px;
                    cursor: pointer;
                    line-height: 20px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;

                    h3 {
                        font-size: 12px;
                        font-weight: 400;
                        color: #b0b0b0;
                    }
                }

                .price {
                    font-size: 16px;
                    color: #ff6700;
                }
            }

            .item:hover {
                z-index: 2;
                -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                -webkit-transform: translate3d(0, -2px, 0);
                transform: translate3d(0, -2px, 0);
            }
        }
    }
}</style>